
<template>
  <div class="singer">
    <transition
      enter-active-class="animate__animated animate__fadeInRight"
      leave-active-class="animate__animated animate__fadeOutRight"
    >
      <router-view />
    </transition> 
    <van-index-bar :index-list="indexList">
      <ul v-for="(item, index) in list" :key="index">
        <van-index-anchor :index="item.Findex">
          {{ item.Findex }}</van-index-anchor
        >
        <li
          class="singer-item"
          v-for="sItem in item.list"
          :key="sItem.Fsinger_id"
          @click="jump(sItem.Fsinger_mid, sItem.Fsinger_name)"
        >
          <img v-lazy="sItem.url" alt="" />
          {{ sItem.Fsinger_name }}
        </li>
      </ul>
    </van-index-bar> 
  </div>
</template>
<script>
 import { singerList } from "./server.js";
export default {
 
  data() {
    return {
    
      list: [],
    };
  },
  computed: {
    indexList() {
      return this.list.map((item) => item.Findex);
    },
  },
  methods: {
    jump(mid, name) {
      if (!mid) return this.$toast("缺少mid");
      this.$router.history.push(`/singer/${mid}?name=${name}`);
      return false;
    },
    handleData(arr) {
      if (!Array.isArray(arr)) return [];
      console.log(arr);
      // 根据名字的索引进行分组
      const obj = {};
      arr.map((item) => {
        // eslint-disable-next-line camelcase
        const { Findex, Fsinger_mid } = item;
        // eslint-disable-next-line camelcase
        const url = `http://y.gtimg.cn/music/photo_new/T001R800x800M000${Fsinger_mid}.jpg`;
        if (obj[Findex]) {
          obj[Findex].push({ ...item, url });
        } else {
          obj[Findex] = [{ ...item, url }];
        }
        return item;
      });
      // obj对象的索引索引顺序是无需的
      const quenArr = [];
      Object.keys(obj).map((key) => {
        if (key !== "9") {
          const tmpObj = {
            Findex: key,
            list: obj[key],
          };
          quenArr.push(tmpObj);
        }
        return key;
      });
     
      return quenArr.sort(
        (a, b) => a.Findex.charCodeAt() - b.Findex.charCodeAt()
      );
    },
    async getSingerList() {
      const { code, data } = (await singerList()) || {};
      if (code) return;
      this.list = this.handleData(data.list || []);
    },
  },
  created() {
    this.getSingerList();
  },
  
};
</script>

<style lang="less" scoped>
@import "~@style/index.less";
.singer {
  background: #222;
  position: fixed;
  .top(44);
  bottom: 0;
  left: 0;
  right: 0;
  overflow: scroll;
  /deep/ .van-index-anchor {
    color: rgba(255, 255, 255, 0.5);
    background: #333;
  }
  ::v-deep .van-index-bar__sidebar {
    background: rgba(0, 0, 0, 0.3);
    color: rgba(255, 255, 255, 0.5);
    .van-index-bar__index--active {
      color: yellow;
    }
  }
  .singer-item {
    color: rgba(255, 255, 255, 0.5);
    .w(375);
    .h(70);
    box-sizing: border-box;
    .padding(20,0,0,30);
    img {
      .w(50);
      .h(50);
      border-radius: 50%;
      .margin(0,20,0,0);
    }
  }
}

.hehe-enter-active,
.hehe-leave-active {
  transition: opacity 1s;
}
.hehe-enter /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.hehe-enter-to {
  opacity: 1;
}
.hehe-leave {
  opacity: 1;
}
.hehe-leave-to {
  opacity: 0;
}
</style>
